<template>
	<view class="order">
		<!-- tab 栏 -->
		<view class="tabBox" style="display: flex;justify-content: space-between;background-color: #fff;">
			<view class="navItem" v-for="(i,index) in tabList" :key="index"
				:style="{color:(tabCurrent == (index+1)?'#000':'#909090')}" @tap.stop="tabChange(index+1)">
				<view class="leftIcon" :style="{background:(tabCurrent == (index+1)?'#47578E':'#fff')}" style="margin-right: 10rpx;"></view>
				<view class="">
					{{i.name}}
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="listBox">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="list_t flex-r-b-c">
					<view class="list_t_r">
						<view class="list_t_r_t flex-r-b-c">
							<view class="name">{{item.titile||''}}</view>
						</view>
						<view class="time">地址：{{item.address||''}}</view>
						<view class="time">日期：{{item.train_start_time||''}}-{{item.train_end_time||''}}</view>
					</view>
					<view class="" style="display: flex;justify-content: flex-end;">
						<view class="del" @tap.stop="handleLogout(item.a_id)">删除</view>
					</view>
				</view>
			</view>
			<!-- 提示栏 -->
			<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view>
		</view>
		<u-modal :show="delShow" title="删除" content="确认删除吗？" close-on-click-overlay show-cancel-button @close="closeDel"
			@cancel="closeDel" @confirm="handleDel" />
	</view>
</template>

<script>
	import {
		my
	} from "@/request/myApi.js";
	import {
		trainDel
	} from "@/request/homeApi.js";
	export default {
		data() {
			return {
				delShow: false,
				tabCurrent: 1,
				tabList: [{
					name: '审核中',
					index: 1
				}, {
					name: '已通过',
					index: 2
				}, {
					name: '已拒绝',
					index: 3
				}],
				page: 1,
				list: [],
				isText: '',
				last_page:1,
				delId:''
			};
		},

		onLoad() {


		},
		onShow(){
			this.list = []
			this.page = 1
			this.isText = ''
			this.myList()
		},
		methods: {
			// 关闭退出登录弹窗
			closeDel() {
				this.delShow = false;
			},
			// 打开退出登录弹窗
			handleLogout(id) {
				this.delShow = true;
				this.delId = id
			},
			// 删除
			handleDel() {
				this.delShow = false;
				let that = this
				trainDel({
					id:that.delId
				}).then((res) => {
					if(res.code == 200){
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
						that.list = []
						that.page = 1
						that.isText = ''
						that.myList()
					}else{
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
					
				});
				
			},
			// 获取活动列表
			myList(){
				let that = this
				my({
					table: 1,
					status: this.tabCurrent,
					page:this.page,
					limit:10
				}).then((res) => {
					res.data.list.length == 0 ? that.isText = '暂无数据' : that.isText = ''
					that.list = that.list.concat(res.data.list)
					that.last_page = Math.ceil(res.data.count / res.data.list.length)
					console.log(that.list,'that.list',that.last_page)
				});
			},

			// tab 切换
			tabChange(e){
				this.tabCurrent = e
				this.list = []
				this.page = 1
				this.isText = ''
				this.myList()
			},
	
			// 跳转到详情页面
			goDetails(el){
				let res = {
					order_number: el.order_number,
					goods_img: el.goods_img,
					goods_name: el.goods_name
				}
				uni.navigateTo({
					url: '/pages/order/details/details?res=' + JSON.stringify(res)
				})
			}
		},
		onReachBottom() {
			let that = this
			if (that.page < that.last_page) {
				that.page = that.page + 1
				that.myList()
			}
		}
		
	}
</script>

<style lang="less">
	page{
		background-color: #fff;
	}
	.u-tab-bar{
		display: none !important;
	}
	.chooseCup {
		margin-right: 8rpx !important;
	
		image {
			width: 20rpx !important;
			height: 12rpx !important;
			margin: 14rpx;
		}
	}
	.order{
		width: 100vw;
		.tabBox{
			width: 100%;
			padding-top: 16rpx;
			padding-bottom: 12rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			padding-right: 360rpx;
			.leftIcon{
				width: 6rpx;
				height: 30rpx;
			}
			.navTitle {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #979797;
				padding: 20rpx 0;
			}
			
			.navItem {
				width: 43.33%;
				text-align: center;
				display: flex;
				margin-left: 20rpx;
				align-items: center;
				
				// z-index: 100;
			}
			// height: 100rpx;
		}
		.listBox{
			width: 95%;
			margin: 0rpx auto;
			.list{
				width: 100%;
				height: auto;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx auto;
				box-sizing: border-box;
				-moz-box-shadow:  0 0 10px #f2f2f2;
				-webkit-box-shadow:  0 0 10px #f2f2f2;
				box-shadow: 0 0 10px #f2f2f2;
				.list_t{
					.del {
						width: 120rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						border: 2rpx solid gray;
						border-radius: 38rpx;
						font-size: 26rpx;
						margin-top: 20rpx;
					}
					.list_t_r{
						width: 100%;
						.list_t_r_t{
							font-size: 32rpx;
							font-weight: 400;
							.name{
								margin: 10rpx 0;
								font-weight: 600;
							}
						}
						
						.time{
							font-size: 27rpx;
							font-weight: 400;
							color: #979797;
							margin: 6rpx 0;
						}
					}
				}				
			}
		}
	}
</style>
